<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- jquery选择器
    原生js获取原生方式很多，很复杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准
    $("选择器")//里面选择器直接写CSS选择器即可，但是要加引号
     ID选择器   $("#id") 获取指定ID的元素
     全选选择器  $("*")  匹配所有元素
    类选择器     $(".class") 获取同一个类class的元素
  标签选择器     $("div")- 获取同一个标签的所有元素
  并集选择器     $("div,p,li")  获取多个元素
  交集选择器     $("li current") 交集元素-->

  
  <script>
// 二，隐式迭代  ：遍历内部DOM元素（伪类组形式存储）的过程就是叫做隐式迭代
//     1,获取四个div元素
//     console.log($("div"));
//     2,给四个div设置背景颜色为粉色  jQuery对象不能使用style
//     $("div").css("background","pink");
//     3.隐市迭代就是把匹配的所有元素内部经行遍历一遍
//     $("ul li").css("color","red")
  </script>
  <script>
// 三，jquery筛选选择器
    // :first  $("ul li :first").css("color","red")//获取第一个元素
    // :last    $("ul li:last").css("color","pink")//获取最后一个li元素
    // :eq(index) $("li:eq(2)").css("color","red")//获取到li元素中，选择索引号为2的元素，索引号index从0开始
    // :odd
    // :even
  </script>
  <script>
// 四，jQuery筛选方法
    //     父 parent() 
    //     $('li').parent()
    //     子  children()
    //     $("ul").children()
    //     所有的孩子，包括儿子和孙子
    //     $(".nav").find("p").css("color","red")
        //    show()//显示方法
        //    hide()//隐藏方法
        // 兄弟元素siblings除了自身元素之外的所有亲兄弟
        // siblings()
        // $("ol .item").siblings("li").css("color","red")
        // 第n个元素
        // var index= 2;
        //      $("ul li").eq(index).css("color","blue")
        // 3,判断是否有某个类名
        // console.log($("div:first").hasClass("current"))
// 五，链式编程
//     $(this).css("background","red").siblings().css("background","")
</script>





<script>
// 、、、、、、、、、jQuery样式操作、、、、、、、、、、、、、、
// 一、jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
//         1、参数只写属性名，则式返回属性值
//              $(this).css("color")
//         2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
//              $(this).css("color","red")
//         3、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
//              $(this).css({
//               color:pink;
//               font-size:20px
//              })
  
// 二、设置类样式方法
// //  1、添加类
//     $("div").addClass("current")
// // 2、移除类
//     $("div").removeClass("current")
// // 3、切换类
//     $("div").toggleClass("current")

</script>
<script>

// 、、、、、、、、、jQuery效果、、、、、、、、、、、、、、

// 显示隐藏：show()  hide()  toggle()
// 滑动：  slideDown()  slideUp()   slideToggle()
// 淡入淡出：fadeln()  fodeOut() fadeToggle()  fodeTo()
// 自定义动画：animate()


</script>
<script>
// 、、、、、、、、、jQuery属性操作、、、、、、、、、、、、、、
// 一、
      // 1，设置或获取元素固有属性值prop()
      // 例子：$("a").prop("href")
      // 2，获取元素的自定义属性  我们通过attr（）获取
  </script>





  <script>
    // 、、、、、、、、jquery内容文本值.html
   
    // $(function(){
    //        console.log($("div").html())  // 获取设置元素内容html
    //        console.log($("div").text())     获取设置元素文本内容  text（）
    //        console.log($("input").val())     获取设置表单值val（）
    //       })
    // $("div").each(function(index,domEle)) 遍历成功
  </script>
  <script>
    // ///////////////////////jQuery元素操作
    // 主要是遍历、创建、添加、删除元素操作
    // 遍历：$("div").each(function(index,domEle){}
  </script>
</body>
</html>